<template>
  <div class="page">
    <h4 style="margin-left: 3px">基本信息筛选</h4>
    <el-row :gutter="20">
      <el-form id="formbox" ref="formInline" :inline="true" :model="formInline">
        <el-col :span="8" class="mb20">
          <el-form-item label="姓名 :" prop="name">
            <el-input
              clearable
              v-model="formInline.name"
              placeholder="请输入姓名"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" class="mb20">
          <el-form-item label="证件号码 :" prop="cardNumber">
            <el-input
              clearable
              v-model="formInline.cardNumber"
              placeholder="请输入证件号码"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" class="mb20">
          <el-form-item label="录入人 :" prop="inputPerson">
            <el-input
              clearable
              v-model="formInline.inputPerson"
              placeholder="请输入录入人"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" class="mb20">
          <el-form-item label="回填状态 :" prop="backFillingStatus">
            <el-select
              v-model="formInline.backFillingStatus"
              placeholder="请选择回填状态"
            >
              <el-option label="未回填" value="未回填"></el-option>
              <el-option label="回填成功" value="回填成功"></el-option>
              <el-option label="回填失败" value="回填失败"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8" class="mb20">
          <el-form-item label="检验日期 :" prop="testDate">
            <el-date-picker
            :disabled-date="disableFutureDates"
              v-model="formInline.testDate"
              type="daterange"
              value-format="YYYY-MM-DD"
              range-separator="-"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              size="large"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8" class="mb20">
          <el-form-item label="导入日期 :" prop="importDate">
            <el-date-picker
            :disabled-date="disableFutureDates"
              v-model="formInline.importDate"
              type="daterange"
              value-format="YYYY-MM-DD"
              range-separator="-"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              size="large"
            />
          </el-form-item>
        </el-col>

        <el-col :span="8" class="mb20">
          <el-form-item label="质控类型 :" prop="result">
            <el-select v-model="formInline.result" placeholder="请选择质控类型">
              <el-option label="全部" value="全部"></el-option>
              <el-option label="告警类" value="告警类"></el-option>
              <el-option label="错误类" value="错误类"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="16" class="form-button">
          <el-form-item>
            <el-button type="primary" @click="getList()">查询</el-button>
            <el-button @click="onReset('formInline')">重置</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <div class="table-container">
      <el-col :span="24"
        ><h4 style="margin-left: 3px">检验数据 (共{{ total }}条)</h4></el-col
      >
      <el-col :span="24" style="display: flex">
        <el-col :span="4">
          <div class="table-btn">
            <div>
              <el-checkbox
                @change="checkedAllChange"
                v-model="checkedAll"
                :label="'全选'"
                :disabled="tableData.length == 0"
              />
            </div>
            <div style="margin-right: 10px">
              <label
                >已选择<el-text type="primary">{{
                  checkedAll == true ? selectionCount : multipleSelection.length
                }}</el-text
                >条</label
              >
            </div>
          </div>
        </el-col>
        <el-col :span="20" class="tr">
          <el-button
            style="width: 87.6px"
            type="primary"
            @click="importSelect()"
            >导入</el-button
          >
          <el-button
            style="width: 87.6px; color: #fff"
            type="primary"
            :disabled="multipleSelection.length === 0"
            @click="exportSelect()"
            >导出</el-button
          >

          <el-button
            :disabled="multipleSelection.length === 0"
           type="danger"
            @click="testSt()"
            style="width: 87.6px; color: #fff"
            >删除</el-button
          >
          <el-button style="width: 95px" type="success" @click="exportRecord()"
            >下载导入模版</el-button
          >
        </el-col>
      </el-col>
    </div>
    <el-table
      ref="multipleTableRef"
      :data="tableData"
      border
      :default-sort="{ prop: 'date', order: 'descending' }"
      style="width: 100%"
      tooltip-effect="light"
      row-key="id"
      class="tableAuto"
      @selection-change="handleSelectionChange"
      :header-cell-class-name="setClassName"
      max-height="470px"
    >
      <!-- v-loading="loading" -->
      <el-table-column
        type="selection"
        :reserve-selection="true"
        width="55"
        align="center"
      />
      <el-table-column
        type="index"
        label="序号"
        width="80"
        align="center"
        fixed="left"
      />
      <el-table-column
        prop="name"
        label="姓名"
        align="center"
        show-overflow-tooltip
        fixed="left"
      />
      <el-table-column
        prop="gender"
        label="性别"
        align="center"
        width="100"
        show-overflow-tooltip
      />
      <el-table-column
        prop="cardType"
        label="证件类型"
        align="center"
        width="150"
        show-overflow-tooltip
      />
      <el-table-column
        prop="cardNumber"
        label="证件号码"
        align="center"
        width="180"
        show-overflow-tooltip
      />

      <!-- <el-table-column
        prop="birthday"
        label="年龄"
        align="center"
        width="100"
        show-overflow-tooltip
      /> -->
      <el-table-column
        prop="backFillingStatus"
        label="回填状态"
        align="center"
        width="100"
        show-overflow-tooltip
      >
        <template v-slot="scope">
          <span>{{
            scope.row.backFillingStatus ? scope.row.backFillingStatus : " 未回填 "
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="wbc"
        label="白细胞计数(WBC)"
        width="100"
        show-overflow-tooltip
      >
        <template #default="scope">
          <el-popover trigger="hover" placement="top">
            <p>{{ getStatus(scope.row.bloodAnalysisStatus, "wbc")?.desc }}</p>
            <template #reference>
              <div
                :class="
                  'name-wrapper name-wrapper' +
                  getStatus(scope.row.bloodAnalysisStatus, 'wbc')?.type
                "
              >
                <span></span>
                {{ scope.row.wbc }}
              </div>
            </template>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column
        prop="plf"
        label="血小板计数(PLF)"
        width="100"
        show-overflow-tooltip
      >
        <template #default="scope">
          <el-popover trigger="hover" placement="top">
            <p>{{ getStatus(scope.row.bloodAnalysisStatus, "plf")?.desc }}</p>
            <template #reference>
              <div
                :class="
                  'name-wrapper name-wrapper' +
                  getStatus(scope.row.bloodAnalysisStatus, 'plf')?.type
                "
              >
                <span></span>
                {{ scope.row.plf }}
              </div>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        prop="hgb"
        label="血红蛋白(HGB)"
        width="100"
        show-overflow-tooltip
      >
        <template #default="scope">
          <el-popover trigger="hover" placement="top">
            <p>{{ getStatus(scope.row.bloodAnalysisStatus, "hgb")?.desc }}</p>
            <template #reference>
              <div
                :class="
                  'name-wrapper name-wrapper' +
                  getStatus(scope.row.bloodAnalysisStatus, 'hgb')?.type
                "
              >
                <span></span>
                {{ scope.row.hgb }}
              </div>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        prop="glu"
        label="血葡萄糖(GLU)"
        width="100"
        show-overflow-tooltip
      >
        <template #default="scope">
          <el-popover trigger="hover" placement="top">
            <p>{{ getStatus(scope.row.bloodAnalysisStatus, "glu")?.desc }}</p>
            <template #reference>
              <div
                :class="
                  'name-wrapper name-wrapper' +
                  getStatus(scope.row.bloodAnalysisStatus, 'glu')?.type
                "
              >
                <span></span>
                {{ scope.row.glu }}
              </div>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        prop="hbA1c"
        label="糖化血红蛋白(HbA1c)"
        width="120"
        show-overflow-tooltip
      >
        <template #default="scope">
          <el-popover trigger="hover" placement="top">
            <p>{{ getStatus(scope.row.bloodAnalysisStatus, "hba1c")?.desc }}</p>
            <template #reference>
              <div
                :class="
                  'name-wrapper name-wrapper' +
                  getStatus(scope.row.bloodAnalysisStatus, 'hba1c')?.type
                "
              >
                <span></span>
                {{ scope.row.hbA1c }}
              </div>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        prop="alt"
        label="谷丙转氨酶(ALT)"
        width="100"
        show-overflow-tooltip
      >
        <template #default="scope">
          <el-popover trigger="hover" placement="top">
            <p>{{ getStatus(scope.row.bloodAnalysisStatus, "alt")?.desc }}</p>
            <template #reference>
              <div
                :class="
                  'name-wrapper name-wrapper' +
                  getStatus(scope.row.bloodAnalysisStatus, 'alt')?.type
                "
              >
                <span></span>
                {{ scope.row.alt }}
              </div>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        prop="ast"
        label="谷草转氨酶(AST)"
        width="100"
        show-overflow-tooltip
      >
        <template #default="scope">
          <el-popover trigger="hover" placement="top">
            <p>{{ getStatus(scope.row.bloodAnalysisStatus, "ast")?.desc }}</p>
            <template #reference>
              <div
                :class="
                  'name-wrapper name-wrapper' +
                  getStatus(scope.row.bloodAnalysisStatus, 'ast')?.type
                "
              >
                <span></span>
                {{ scope.row.ast }}
              </div>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        prop="alb"
        label="白蛋白(ALB)"
        width="100"
        show-overflow-tooltip
      >
        <template #default="scope">
          <el-popover trigger="hover" placement="top">
            <p>{{ getStatus(scope.row.bloodAnalysisStatus, "alb")?.desc }}</p>
            <template #reference>
              <div
                :class="
                  'name-wrapper name-wrapper' +
                  getStatus(scope.row.bloodAnalysisStatus, 'alb')?.type
                "
              >
                <span></span>
                {{ scope.row.alb }}
              </div>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        prop="tbil"
        label="总胆红素(TBIL)"
        width="100"
        show-overflow-tooltip
      >
        <template #default="scope">
          <el-popover trigger="hover" placement="top">
            <p>{{ getStatus(scope.row.bloodAnalysisStatus, "tbil")?.desc }}</p>
            <template #reference>
              <div
                :class="
                  'name-wrapper name-wrapper' +
                  getStatus(scope.row.bloodAnalysisStatus, 'tbil')?.type
                "
              >
                <span></span>
                {{ scope.row.tbil }}
              </div>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        prop="dbil"
        label="直接胆红素(DBIL)"
        width="100"
        show-overflow-tooltip
      >
        <template #default="scope">
          <el-popover trigger="hover" placement="top">
            <p>{{ getStatus(scope.row.bloodAnalysisStatus, "dbil")?.desc }}</p>
            <template #reference>
              <div
                :class="
                  'name-wrapper name-wrapper' +
                  getStatus(scope.row.bloodAnalysisStatus, 'dbil')?.type
                "
              >
                <span></span>
                {{ scope.row.dbil }}
              </div>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        prop="crea"
        label="肌酐(CREA)"
        width="100"
        show-overflow-tooltip
      >
        <template #default="scope">
          <el-popover trigger="hover" placement="top">
            <p>{{ getStatus(scope.row.bloodAnalysisStatus, "crea")?.desc }}</p>
            <template #reference>
              <div
                :class="
                  'name-wrapper name-wrapper' +
                  getStatus(scope.row.bloodAnalysisStatus, 'crea')?.type
                "
              >
                <span></span>
                {{ scope.row.crea }}
              </div>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        prop="ua"
        label="尿酸(UA)"
        width="100"
        show-overflow-tooltip
      >
        <template #default="scope">
          <el-popover trigger="hover" placement="top">
            <p>{{ getStatus(scope.row.bloodAnalysisStatus, "ua")?.desc }}</p>
            <template #reference>
              <div
                :class="
                  'name-wrapper name-wrapper' +
                  getStatus(scope.row.bloodAnalysisStatus, 'ua')?.type
                "
              >
                <span></span>
                {{ scope.row.ua }}
              </div>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        prop="urea"
        label="尿素(UREA)"
        width="100"
        show-overflow-tooltip
      >
      <template #default="scope">
          <el-popover trigger="hover" placement="top">
            <p>{{ getStatus(scope.row.bloodAnalysisStatus, "urea")?.desc }}</p>
            <template #reference>
              <div
                :class="
                  'name-wrapper name-wrapper' +
                  getStatus(scope.row.bloodAnalysisStatus, 'urea')?.type
                "
              >
                <span></span>
                {{ scope.row.urea }}
              </div>
            </template>
          </el-popover>
        </template>
    </el-table-column>
      <el-table-column
        prop="k"
        label="血钾(K)"
        width="100"
        show-overflow-tooltip
      >
      <template #default="scope">
          <el-popover trigger="hover" placement="top">
            <p>{{ getStatus(scope.row.bloodAnalysisStatus,"k")?.desc }}</p>
            <template #reference>
              <div
                :class="
                  'name-wrapper name-wrapper' +
                  getStatus(scope.row.bloodAnalysisStatus,'k')?.type
                "
              >
                <span></span>
                {{ scope.row.k }}
              </div>
            </template>
          </el-popover>
        </template>
    </el-table-column>
      <el-table-column
        prop="na"
        label="血钠(Na)"
        width="100"
        show-overflow-tooltip
      >
      <template #default="scope">
          <el-popover trigger="hover" placement="top">
            <p>{{ getStatus(scope.row.bloodAnalysisStatus, "na")?.desc }}</p>
            <template #reference>
              <div
                :class="
                  'name-wrapper name-wrapper' +
                  getStatus(scope.row.bloodAnalysisStatus, 'na')?.type
                "
              >
                <span></span>
                {{ scope.row.na }}
              </div>
            </template>
          </el-popover>
        </template>
    </el-table-column>
      <el-table-column
        prop="tc"
        label="总胆固醇(TC)"
        width="100"
        show-overflow-tooltip
      >
      <template #default="scope">
          <el-popover trigger="hover" placement="top">
            <p>{{ getStatus(scope.row.bloodAnalysisStatus, "tc")?.desc }}</p>
            <template #reference>
              <div
                :class="
                  'name-wrapper name-wrapper' +
                  getStatus(scope.row.bloodAnalysisStatus, 'tc')?.type
                "
              >
                <span></span>
                {{ scope.row.tc }}
              </div>
            </template>
          </el-popover>
        </template>
    </el-table-column>
      <el-table-column
        prop="tg"
        label="甘油三脂(TG)"
        width="100"
        show-overflow-tooltip
      >
      <template #default="scope">
          <el-popover trigger="hover" placement="top">
            <p>{{ getStatus(scope.row.bloodAnalysisStatus, "tg")?.desc }}</p>
            <template #reference>
              <div
                :class="
                  'name-wrapper name-wrapper' +
                  getStatus(scope.row.bloodAnalysisStatus, 'tg')?.type
                "
              >
                <span></span>
                {{ scope.row.tg }}
              </div>
            </template>
          </el-popover>
        </template>
    </el-table-column>
      <el-table-column
        prop="ldlC"
        label="低密度脂蛋白(LDL-C)"
        width="120"
        show-overflow-tooltip
      >
      <template #default="scope">
          <el-popover trigger="hover" placement="top">
            <p>{{ getStatus(scope.row.bloodAnalysisStatus, "ldlC")?.desc }}</p>
            <template #reference>
              <div
                :class="
                  'name-wrapper name-wrapper' +
                  getStatus(scope.row.bloodAnalysisStatus, 'ldlC')?.type
                "
              >
                <span></span>
                {{ scope.row.ldlC }}
              </div>
            </template>
          </el-popover>
        </template>
    </el-table-column>
      <el-table-column
        prop="hdlC"
        label="高密度脂蛋白(HDL-C)"
        width="120"
        show-overflow-tooltip
      >
        <template #default="scope">
          <el-popover trigger="hover" placement="top">
            <p>{{ getStatus(scope.row.bloodAnalysisStatus, "hdlC")?.desc }}</p>
            <template #reference>
              <div
                :class="
                  'name-wrapper name-wrapper' +
                  getStatus(scope.row.bloodAnalysisStatus, 'hdlC')?.type
                "
              >
                <span></span>
                {{ scope.row.hdlC }}
              </div>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <!-- <el-table-column
        prop="visitTime"
        label="质控-告警类"
        align="center"
        width="180"
        show-overflow-tooltip
      >
        <template v-slot="scope">
          <span>{{ scope.row.visitTime ? scope.row.visitTime : " - " }}</span>
        </template>
      </el-table-column> -->

      <el-table-column
        prop="exaTime"
        align="center"
        width="180"
        label="检验时间"
        show-overflow-tooltip
      >
    
    </el-table-column>
      <el-table-column
        prop="inputPerson"
        label="录入人"
        align="center"
        width="100"
        show-overflow-tooltip
      ></el-table-column>

      <el-table-column
        prop="createTime"
        align="center"
        width="180"
        label="导入时间"
        show-overflow-tooltip
      ></el-table-column>

      <el-table-column
        show-overflow-tooltip
        label="操作"
        width="140"
        align="center"
        fixed="right"
      >
        <template #default="scope">
          <el-button
            text=""
            size="small"
            type="primary"
            @click="openEditResidents(scope.row)"
            >编辑</el-button
          >
          <el-button
            text=""
            size="small"
            type="danger"
            @click="delFollow(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-col
      :span="24"
      style="display: flex; justify-content: end; margin-bottom: 50px"
    >
      <el-pagination
        v-if="this.total > 0"
        v-model:currentPage="this.page"
        v-model:page-size="this.size"
        :total="this.total"
        :page-sizes="[10, 20, 50, 100, 500]"
        class="new-pagination"
        small
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes, prev, pager, next, jumper"
      />
    </el-col>
    <EditDialog
      ref="editDialogRef"
      :dialogObj="dialogObj"
      @changeDrug="handleChangeDD"
    />
    <DrugDialog
      ref="drugDialogRef"
      :state="state"
      @changeDrug="handleChangeDD"
    ></DrugDialog>

    <!--@reloadTable="handleQuery" -->
  </div>
</template>

<script lang="ts">
import http from "@/utils/request";
import { ElMessage } from "element-plus";
import MenuCheck from "@/components/menu-check/index.vue";
import DeptList from "@/components/dept-list/index.vue";
import EditDialog from "@/pages/examples/bloodAnalysis/components/editDialog.vue";
import DrugDialog from "@/pages/examples/bloodAnalysis/components/drugDialog.vue";
const disableFutureDates = (time) =>  time > new Date();

export default {
  components: {
    MenuCheck,
    DeptList,
    EditDialog,
    DrugDialog,
  },
  emits: ["changeDrug"],
  data() {
    return {
      //记录条数
      total: 1,
      //每页条数
      size: 10,
      //当前页码
      page: 1,
      //选择条数
      selectionCount: 0,
      //选择数组
      multipleSelection: [],
      //全选状态
      checkedAll: false,
      dialogObj: {
        //弹窗标题
        editResidentsTitle: "",
        //弹窗是否显示
        isDialogVisible: false,
        DialogDate: {},
      },
      state: {
        dialogUploadVisible: false,
        accept: ".xlsx,.csv",
      },
      //表格数据
      tableData: [],
      ruleform: {
        name: "",
      },
      formInline: {
        //姓名
        name: "",
        //证件号码
        cardNumber: "",
        //录入人
        inputPerson: "",
        //检验日期
        testDate: "",
        exaBeginTime: "",
        exaEndTime: "",
        //导入日期
        importDate: "",
        //回填状态
        backFillingStatus: "",
        importBeginTime: "",
        importEndTime: "",
        // 质控类型
        result: "",
      },
    };
  },
  methods: {
    disableFutureDates,
    getStatus(row, field) {
      if (row) {
        if (row[field + "Status"]) {
          const obj = JSON.parse(row[field + "Status"]);
          switch (obj.status) {
            case "错误类":
              obj.type = 2;
              break;
            case "告警类":
              obj.type = 1;
              break;
            default:
              obj.type = "";
          }
          return obj;
        }
        else if (row[field + "status"]) {
          const obj = JSON.parse(row[field + "status"]);
          switch (obj.status) {
            case "错误类":
              obj.type = 2;
              break;
            case "告警类":
              obj.type = 1;
              break;
            default:
              obj.type = "";
          }
          return obj;
        } else {
          return { status: "正常", desc: "正常", type: "" };
        }      
      }
      return { status: "正常", desc: "正常", type: "" };
    },
    handleChangeDD(newValue, oldValue) {
      // console.log('newValue',newValue);
      this.state.dialogUploadVisible = newValue;
      this.getList();
    },
    //文件上传成功处理
    handleSuccess(response, file, fileList) {
      // 处理上传成功的逻辑
      console.log("上传成功", response);
      this.fileList = fileList;
    },
    getTodayRange() {
      const today = new Date();
      const formatDate = (date) => {
        const y = date.getFullYear();
        const m = (date.getMonth() + 1).toString().padStart(2, "0");
        const d = date.getDate().toString().padStart(2, "0");
        return `${y}-${m}-${d}`;
      };
      const todayStr = formatDate(today);
      // console.log(todayStr);

      return [todayStr, todayStr];
    },
    //获取列表
    getList() {
      const requestData = { page: this.page, size: this.size };
      for (const key in this.formInline) {
        if (this.formInline[key]) {
          requestData[key] = this.formInline[key];
        }
      }
      //@ts-ignore
      if (requestData.testDate) {
        //@ts-ignore
        requestData.exaBeginTime = requestData.testDate[0];
        //@ts-ignore
        requestData.exaEndTime = requestData.testDate[1];
        //@ts-ignore
        delete requestData.testDate;
      }
      //@ts-ignore
      if (requestData.importDate) {
        //@ts-ignore
        requestData.importBeginTime = requestData.importDate[0];
        //@ts-ignore
        requestData.importEndTime = requestData.importDate[1];

        //@ts-ignore
        delete requestData.importDate;
      }

      http.post("/assist/blood/getPageList", requestData).then((res) => {
        //@ts-ignore
        if (res.code == 200) {
          this.tableData = res.data.list;
          this.total = res.data.total;
        }
      });
    },
    //重置搜索
    onReset(formName) {
      this.$refs[formName].resetFields();
      this.formInline.testDate = "";
      this.formInline.importDate = "";
      this.page = 1;
    },
    //打开编辑页
    openEditResidents(row) {
      this.dialogObj.editResidentsTitle = "编辑";
      this.dialogObj.isDialogVisible = true;
      this.dialogObj.DialogDate = row;
    },
    //删除随访
    delFollow(row) {
      const idList = [row.id];
      this.$confirm("是否确定删除已选择数据", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          http.post("/assist/blood/deleteList", idList).then((res) => {
            //@ts-ignore
            if (res.code == 200) {
           
              //@ts-ignore
              ElMessage.success(res.message);
              this.checkedAll = false;
              this.$refs.multipleTableRef!.clearSelection();
              this.getList();
            }
          });
        })
        .catch(() => {});
    },
    // 改变页面容量
    handleSizeChange(val: number) {
      this.size = val;
      this.getList();
    },

    // 改变页码序号
    handleCurrentChange(val: number) {
      this.page = val;
      this.getList();
    },
    checkSelectable() {
      return this.checkedAll != true;
    },
    checkedAllChange() {
      if (this.checkedAll == true) {
        this.selectionCount = this.tableData.length;

        this.tableData.forEach((row: any) => {
          this.$refs.multipleTableRef!.toggleRowSelection(row, true);
        });
      } else {
        this.selectionCount = 0;
        this.$refs.multipleTableRef!.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      if(val.length==this.total||val.length==this.size){
        this.checkedAll = true;
        this.selectionCount=val.length;
      }else{
        this.checkedAll = false;
        this.selectionCount=0;
      }  
    },
    setClassName({ column }) {
      return this.checkedAll == true ? "all-disabled" : "";
    },
    //下载导入模版
    exportRecord() {
      http.get("/assist/initializeExcelTemplate/blood").then((res) => {
        //@ts-ignore
        if (res.code == 200) {
          window.open(res.data);
          //@ts-ignore
           ElMessage.success(res.message);;
        } else {
        }
      });
    },
    //导入
    importSelect() {
      this.state.dialogUploadVisible = true;
    },
    //导出
    exportSelect() {
      let idList = this.multipleSelection.map((item) => item.id);
      http.post("/assist/blood/exportToExcel", idList).then((res) => {
        //@ts-ignore
        if (res.code == 200) {
          //@ts-ignore
          ElMessage.success(res.message);
          this.multipleSelection=[];
          this.checkedAll=false;
          this.$refs.multipleTableRef.clearSelection();
          window.open(res.data);
        }
      });
    },
    //删除
    testSt() {
      const idList = this.multipleSelection.map((item) => item.id);
      this.$confirm("是否确定删除已选择数据", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          http.post("/assist/blood/deleteList", idList).then((res) => {
            //@ts-ignore
            if (res.code == 200) {
              //@ts-ignore
              ElMessage.success(res.message);
              this.multipleSelection=[];
              this.$refs.multipleTableRef!.clearSelection();
              this.checkedAll=false;
              this.getList();
            } else {
              //@ts-ignore
              ElMessage.error(res.message);
            }
          });
        })
        .catch(() => {});
    },
  },
  computed: {},
  created() {
    this.getList();
  },
};
</script>
<style scoped>
.page {
  padding: 10px 20px;
  width: 100%;
  box-sizing: border-box;
}
#formbox {
  display: flex;
  flex-wrap: wrap;
  padding: 0 30px;
}
/* .status-container {
  display: flex;
  align-items: center;
}

.yellow-circle {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: yellow;
  display: inline-block;
  margin-right: 5px;
}

.red-circle {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: red;
  display: inline-block;
  margin-right: 5px;
} */
.tableAuto.el-table .cell {
  white-space: nowrap;
}
.name-wrapper span {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 18px;
  display: none;
}
.name-wrapper2 span {
  background: #ff0000;
  display: inline-block;
  color: #ff0000;
}
.name-wrapper1 span {
  background: #ec7f2c;
  display: inline-block;
  color: #ec7f2c;
}

.upload-demo {
  width: 100%;
  border: 2px dashed #d9d9d9;
  text-align: center;
  padding: 40px 20px;
}
.mb20 {
  /* margin: 0 20px; */
}
:deep(.el-input__wrapper) {
  width: 230px;
}
:deep(.el-form-item .el-select__wrapper) {
  min-height: 32px;
  width: 252px;
}
:deep(.el-range-editor--large.el-input__wrapper) {
  height: 32px;
  width: 232px;
}
.form-button {
  display: flex;
  justify-content: start;
}
.table-container {
  display: flex;
  flex-direction: column;
}
.table-btn {
  display: flex;
  height: 50px;
  align-items: center;
  justify-content: space-around;
}
.tr {
  text-align: right;
  height: 50px;
  line-height: 50px;
}
::v-deep .all-disabled .el-checkbox__input .el-checkbox__inner {
  display: none;
}

.new-pagination {
  margin: 30px 0 10px 0 !important;
}
</style>
